<template>
    <div style="padding: 20px;">
        <div v-if="flag">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
                <el-form-item label="客户姓名" prop="name">
                    <el-input v-model="formInline.name" placeholder="请输入客户姓名" clearable />
                </el-form-item>
                <el-form-item label="客户手机" prop="phone">
                    <el-input v-model="formInline.phone" placeholder="请输入客户手机号码" clearable />
                </el-form-item>
                <el-form-item label="归属人" prop="owner">
                    <el-input v-model="formInline.owner" placeholder="请输入线索归属人" clearable />
                </el-form-item>
                <el-form-item label="跟进时间" prop="timer">
                    <el-date-picker v-model="formInline.timer" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getbusinessList" :icon="Search">搜索</el-button>
                    <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="display: flex;justify-content: space-between;">
            <div class="btn-info">
                <el-button type="primary" :icon="Plus" plain @click="addInfo">新增</el-button>
                <el-button :disabled="edit" @click="editActiveInfo" type="success" :icon="Edit" plain>修改</el-button>
                <el-button :disabled="deleteBtn" type="danger" :icon="Delete" plain @click="deleteline">删除</el-button>
                <el-button type="warning" :icon="Upload" plain>导出</el-button>
            </div>
            <div>
                <el-tooltip class="box-item" effect="dark" :content="flag ? '隐藏搜索' : '显示搜索'" placement="top">
                    <el-button :icon="Search" circle @click="hiddenSearch" />
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="刷新" placement="top">
                    <el-button :icon="Refresh" circle @click="reFresh" />
                </el-tooltip>
            </div>
        </div>
        <div>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange" v-loading="loading">
                <el-table-column type="selection" width="55" />
                <el-table-column property="name" label="客户姓名" width="100" />
                <el-table-column property="phone" label="手机号码" width="100" />
                <el-table-column property="owner" label="商机归属" width="100" />
                <el-table-column property="createTime" label="创建时间">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="status" label="商机状态" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == '1'">已分配</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="nextTime" label="下次跟进时间">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.nextTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope" width="300">
                        <el-button text type="primary" :icon="View">查看</el-button>
                        <el-button v-if="scope.row.status !== '1'" text type="primary" :icon="TopRight">跟进</el-button>
                        <el-button v-if="scope.row.status != '2'" text type="primary" :icon="Connection">分配</el-button>
                        <el-button v-if="scope.row.status == '3'" text type="primary" :icon="Connection">回收</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog v-model="dialogFormVisible" :title="dialog ? '添加商机' : '修改商机'" width="800">
                <el-form :inline="true" ref="ruleForm" :model="form" class="demo-form-inline" label-width="100">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入手机号码" clearable />
                    </el-form-item>
                    <el-form-item label="客户姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入客户姓名" clearable />
                    </el-form-item>
                    <el-form-item label="线索渠道" prop="channelId">
                        <el-select v-model="form.channelId" @change="showInfo" placeholder="渠道来源" clearable>
                            <template v-for="(item, index) in channels" :key="index">
                                <el-option :label="item.channelName" :value="item.channelId" />
                            </template>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动信息" prop="activityId">
                        <el-select v-model="form.activityId" placeholder="活动信息" clearable>
                            <template v-for="(item, index) in infoactivity" :key="index">
                                <el-option :label="item.name" :value="item.activityId" />
                            </template>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="form.gender">
                            <el-radio :value="0">男</el-radio>
                            <el-radio :value="1">女</el-radio>
                            <el-radio :value="2">未知</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="客户年龄" prop="age">
                        <el-input-number v-model="form.age" />
                    </el-form-item>
                    <el-form-item label="微信号" prop="weixin">
                        <el-input v-model="form.weixin" placeholder="请输入微信号" clearable />
                    </el-form-item>
                    <el-form-item label="QQ号" prop="qq">
                        <el-input v-model="form.qq" placeholder="请输入QQ号" clearable />
                    </el-form-item>
                    <el-form-item>
                        <div class="dialog-footer">
                            <el-button v-if="dialog" type="primary" @click="NewinfoActive(ruleForm)">
                                确定
                            </el-button>
                            <el-button v-else type="primary" @click="editInfo(ruleForm)">
                                确定
                            </el-button>
                            <el-button @click="cancelInfo(ruleForm)">取消</el-button>
                        </div>
                    </el-form-item>
                </el-form>

            </el-dialog>
        </div>
        <Pagination :total="total" @pagination="handleSizeChange" :page="page" :limit="limit"></Pagination>
    </div>
</template>

<script lang="ts" setup>
import { Delete, Edit, Search, Upload, Plus, Refresh, View, TopRight, Connection } from '@element-plus/icons-vue'
import { ref, reactive, toRaw } from 'vue'
import { business, deletebusiness, channelsList, activityInfo, addbusiness, editbusinessinfo, putbusinessinfo } from '../../../utils/api';
import { ElTable, ComponentSize, FormInstance, ElMessageBox, ElMessage } from 'element-plus'
import { formatDate } from '../../../utils/index';
import Pagination from '../../../components/Pagination/index.vue'

const loading = ref(false)
const dialogFormVisible = ref(false)
const flag = ref(true)

interface formType {
    name: string,
    phone: string,
    owner: string,
    timer: string,
    pageNum?: number,
    pageSize?: number
}

// 搜索框表单数据 
const formInline: formType = reactive({
    name: "",
    phone: "",
    owner: "",
    timer: "",
    pageNum: 1,
    pageSize: 10
})
// 模态框
const dialog = ref(true)
let form = reactive({
    activityId: "",
    age: null,
    channelId: "",
    gender: "",
    name: "",
    phone: "",
    qq: "",
    weixin: ""
})
// 表格
interface tableType {
    name: string,
    phone: string,
    owner: string,
    createTime: string,
    nextTime: string,
    status: string | number,
    businessId?: string | number
}
const tableData = ref<tableType[]>()
const channels = ref()
const total = ref<number>()
const page = ref<number>(1)
const limit = ref<number>(10)
// 获取商机列表
const getbusinessList = () => {
    business(formInline).then((res) => {
        console.log(res, "zz");
        if (res.code == '200') {
            tableData.value = res.rows
            total.value = res.total
        }
    })
}
getbusinessList()

// 刷新按钮
const reFresh = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
        getbusinessList()
    }, 1000)
}

// 搜索框表单重置
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    reFresh()
}

// 搜索框隐藏
const hiddenSearch = () => {
    flag.value = !flag.value
}



const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 选中显示的表格
const multipleSelection = ref<tableType[]>([])
// 表格选中事件
const edit = ref(true)
const deleteBtn = ref(true)
const handleSelectionChange = (val: tableType[]) => {
    multipleSelection.value = val
    console.log(multipleSelection.value, '选中数据');
    if (multipleSelection.value.length !== 0) {
        deleteBtn.value = false
        if (multipleSelection.value.length == 1) {
            edit.value = false
        } else {
            edit.value = true
        }
    } else {
        edit.value = true
        deleteBtn.value = true
    }
}
// 按钮事件
// 修改
const editActiveInfo = async () => {

    dialog.value = false
    const businessId = ref(multipleSelection.value[0])
    await editbusinessinfo(businessId.value.businessId).then((res) => {
        console.log(res, 'motaik');
        dialogFormVisible.value = true
        if (res.code == '200') {
            form = reactive(res.data)
        }
    })
}
// 删除
const deleteline = () => {
    let arr = []
    for (let index = 0; index < multipleSelection.value.length; index++) {
        const element = multipleSelection.value[index];
        console.log(element, "选中");
        arr.push(element.businessId)
    }
    ElMessageBox.confirm(
        '是否删除选中的文件夹?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deletebusiness(arr).then((res) => {
                console.log(res);
                reFresh()
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                edit.value = true
                deleteBtn.value = true
            })
        })
        .catch(() => {
            reFresh()
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
// 新增
const addInfo = () => {
    dialogFormVisible.value = true
    dialog.value = true
}

// 模态框保存
const NewinfoActive = (formEl: FormInstance | undefined) => {
    addbusiness(form).then((res) => {
        console.log(res);
        dialogFormVisible.value = false
        formEl.resetFields()
        reFresh()
    })
}
const editInfo = (formEl: FormInstance | undefined) => {
    putbusinessinfo(form.value).then((res) => {
        console.log(res);
        dialogFormVisible.value = false
        reFresh()
        formEl.resetFields()
    })
}
// 取消
const cancelInfo = (formEl: FormInstance | undefined) => {
    formEl.resetFields()
    dialogFormVisible.value = false
}
const getchannelsList = () => {
    channelsList().then((res) => {
        console.log(res);
        channels.value = res.data
    })
}
// 选择渠道显示活动信息
const infoactivity = ref()
const showInfo = (v) => {
    console.log(v, 111);
    activityInfo(v).then((res) => {
        console.log(res);
        infoactivity.value = res.data
    })
}
getchannelsList()

// 分页
const handleSizeChange = (v) => {
    console.log(v);
    page.value = v.page
    limit.value = v.limit
    formInline.pageNum = v.page
    formInline.pageSize = v.limit
    getbusinessList()
}
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.dialog-footer {
    text-align: right;
}
</style>